* {
    padding: 0;
    margin: 0;

    --fort-size-075: 0.75rem;
    --fort-size-09: 0.9rem;

    --font-color: #766ca8;
    --font-color-black: #000;

    --border-color: #766ca8;
    --border-color-e6e6e6: #e6e6e6;

    --background-color-fff: #fff;
    --background-color-transparent: transparent;
    --main-content-background-color: #faf9ff;
    --scroller-background-color: #faf9ff;
    --scroller-background-color-hover: #ebebeb;

    --layout-sider-width: 70px;
    --layout-main-content-padding: 0.5rem;
    --menu-item-height: 40px;
    --menu-pagination-height: 2rem;

    --main-content-code-nav-width: 10rem;
    --main-content-margin-top: calc(var(--main-content-header-height) + 2rem);
    --main-content-header-height: 3rem;
    --main-content-header-ul-width: 10rem;
    --main-content-header-li-width: 2rem;

    --border-radius-button: 1rem;
    --border-radius-user: 1rem;
    --border-radius-main-content: 1rem;
}

:root {
    --light-border-color-dark: #000000;
    --light-border-color-gray: #e8e8e8;
}

.flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-row-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-row-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-col-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background-color: var(--background-color-transparent);
    border-radius: 1rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroller-background-color);
    border-radius: 1rem;
}

::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background-color: var(--scroller-background-color-hover);
}

// 过渡动画
.fade-enter {
    opacity: 0;
    transform: translate(0, 25px);
    z-index: 1;
}
.fade-enter.fade-enter-active {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 250ms ease-out, transform 300ms ease;
}
.fade-exit {
    opacity: 1;
    transform: translate(0, 0);
}
.fade-exit.fade-exit-active {
    opacity: 0;
    transform: translate(0, 30px);
    transition: opacity 250ms ease-out, transform 300ms ease;
}